<template>
  <div
    class="getTimeOut"
    :style="'min-height: ' + ($docHeight - bottomSize) + 'px'"
  >
    <img src="/img/getTimeOut.png" />
    <div>哎呀～网络丢失啦</div>
    <div class="loadBtn" @click="subLoadFn">重新加载</div>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      color: "#f1f4fc",
      bottomSize: 0,
    };
  },
  props: {},
  setup() {},
  methods: {
    subLoadFn() {
      window.location.reload();
    },
  },
  mounted() {},
  created() {
    let arr = ["/detail", "/orderDetail", "money"];
    let hasBottom = ["/home", "/order", "/msg", "/user"];
    this.color = arr.includes(this.$route.path) ? "#fff" : "#f1f4fc";
    this.bottomSize = hasBottom.includes(this.$route.path) ? 65 : 0;
  },
};
</script>

<style scoped lang="less">
.getTimeOut {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: #5874b4;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    to bottom,
    v-bind(color),
    #c4d1f5,
    v-bind(color)
  );
  img {
    width: 40%;
    margin-bottom: 1rem;
  }
  .loadBtn {
    width: 60%;
    margin: 0.75rem auto;
    background-color: #86a9fb;
    color: #fff;
    line-height: 2rem;
    text-align: center;
    border-radius: 2rem;
    font-size: 0.65rem;
    margin-top: 2rem;
  }
}
</style>
